<template>
	<view class="container">
		<view class="empty_top">

		</view>

		<view class="ipt">
			<!-- <view class="code">
				<input type="text" placeholder="请输入邀请码" placeholder-style="color: #b3b3b3" v-model="parent_id" />
			</view> -->
			<view class="account">
				<input type="number" placeholder="请输入您的手机号码" placeholder-style="color: #b3b3b3" v-model="mobile" />
			</view>
			<view class="password">
				<input type="password" placeholder="请输入您的密码" placeholder-style="color: #b3b3b3" v-model="password" />
			</view>
			<view class="verify">
				<input type="text" placeholder="请输入验证码" placeholder-style="color: #b3b3b3" v-model="code" />
				<button class="getVerify" @click.stop="getVerify" :disabled="isBtn" :class="{'btn2' : isBtn == true }">
					获取验证码 <text v-if="isBtn">({{timer}}s)</text>
				</button>
			</view>
		</view>

		<view class="register" @click="register">
			<text>注册</text>
		</view>

		<view class="agreement">
			注册即视为同意
			<text @click="agree">《用户注册协议》</text>
		</view>

	</view>
</template>

<script>
	import {
		getVerify,
		register
	} from '../../api/api.js'
	export default {
		data() {
			return {
				parent_id: '',
				mobile: '',
				password: '',
				code: '',
				wxcode: '',
				isBtn: false,
				timer: 60
			}
		},
		onLoad() {
			this.getCode()
		},
		methods: {
			// 获取code码
			getCode() {
				let that = this
				uni.login({
					provider: 'weixin',
					success: function(res) {
						// let wxcode = res.code
						that.wxcode = res.code
					}
				})
			},
			// 获取验证码
			getVerify() {
				let data = {
					mobile: this.mobile,
					event: 'register'
				}
				getVerify(data).then(res => {
					// console.log(res)
					if (res.code == 1) {
						uni.showToast({
							icon: 'none',
							title: '获取验证码成功'
						})
						this.isBtn = true
						let timer1 = setInterval(() => {
							this.timer--;
							console.log(this.timer)
							if (this.timer == -1) {
								clearInterval(timer1);
								this.timer = 60;
								this.isBtn = false
							}
						}, 1000);
					}
				})
			},
			register() {
				let that = this

				if (!this.mobile) {
					uni.showToast({
						icon: 'none',
						title: '请填写手机号'
					})
					return
				}
				if (!this.password) {
					uni.showToast({
						icon: 'none',
						title: '请填写密码'
					})
					return
				}
				if (!this.code) {
					uni.showToast({
						icon: 'none',
						title: '请输入验证码'
					})
					return
				}

				//将code发给后台
				let data = {
					mobile: this.mobile,
					password: this.password,
					code: this.code,
					parent_id: this.parent_id,
					wxcode: this.wxcode,
					client_type: 1
				}
				register(data).then(res => {
					console.log(res)
					if (res.code == 1) {
						// uni.setStorageSync('token', res.data.userinfo.token)
						uni.showModal({
							title:'提示',
							content: res.msg,
							showCancel: false,
							success() {
								uni.navigateTo({
									url: '/pages/login/login'
								})
							}
						})
					}
				})
			},
			agree() {
				uni.navigateTo({
					url: '/pages/ment/ment'
				})
			}
		},

	}
</script>

<style scoped lang="scss">
	.container {
		width: 100%;
		height: 100%;
		background-color: #f5f5f5;

		.empty_top {
			height: 30upx;
		}

		.ipt {
			margin: 0 auto;

			.code,
			.account,
			.password,
			.verify {
				width: 90%;
				height: 90upx;
				margin: 0 5% 20upx;
				border: 1upx solid #e9e9e9;
				border-radius: 50upx;
				background-color: #FFFFFF;

				input {
					width: calc(100% - 30upx);
					height: 100%;
					margin-left: 30upx;
					// text-indent: 30upx;
				}
			}

			.verify {
				position: relative;

				input {
					min-width: calc(100% - 270upx);
					height: 100%;
					margin-left: 30upx;
				}

				.getVerify {
					min-width: 200upx;
					height: 70upx;
					background-color: #3eb9ff;
					position: absolute;
					right: 30upx;
					top: 10upx;
					border-radius: 35upx;
					color: #fff;
					text-align: center;
					line-height: 70upx;
					font-size: 28upx;
				}

				.btn2 {
					background-color: #C0C0C0;
				}
			}
		}

		.register {
			width: 90%;
			height: 90upx;
			margin: 30upx auto 10upx;
			background-color: #3eb9ff;
			border-radius: 50upx;
			color: #FFFFFF;
			line-height: 90upx;
			text-align: center;
		}

		.agreement {
			width: 90%;
			margin: 0 auto;
			text-align: center;
			color: #999;

			text {
				color: #3eb9ff;
			}
		}


	}
</style>
